<template>
    <div class="box">
        <router-link replace to="geren">
            <span>
                <van-icon name="arrow-left" />
            </span>
        </router-link>
        <h3>修改密码</h3>

        <van-form @submit="onSubmit">
            <!-- 旧密码 -->
            <van-field v-model="phone" title="旧密码" type="password" name="旧密码" icon="user-circle-o" placeholder="请输入旧密码"
                :rules="[{ required: true, message: '请输入旧密码' }]" />
            <!-- 新密码 -->
            <van-field v-model="mima" type="password" name="新密码" icon="user-circle-o" placeholder="请输入新密码"
                :rules="[{ required: true, message: '请输入新密码' }]" />

            <!-- 再次确认新密码 -->
            <van-field v-model="mima2" type="password" name="密码" icon="user-circle-o" placeholder="再次输入密码"
                :rules="[{ required: true, message: '请再次输入密码' }]" />

            <!-- 验证码
            <van-field v-model="mobile" center clearable placeholder="请输入短信验证码">
                <template #button>
                    <van-button size="small" type="primary" color="#b0bdb6" style="border-radius:16px;padding-left: 0;
                    padding-right: 20px ;" @click="send">发送验证码</van-button>
                </template>
            </van-field> -->
            <!-- 登录 -->
            <div style="margin: 16px;" route>
                <van-button  block type="info" style="width:60%;margin:0 auto;padding-right: 30px;" native-type="submit" color="#3399ff" @click="login">确定
                </van-button>
            </div>

        </van-form>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import { mapState } from 'vuex';
export default {
    components: {
        [Dialog.name]: Dialog
    },
    data() {
        return {
            phone: '',
            mima: '',
            mima2: '',
            mobile: '',
        }
    },
    computed:{
        ...mapState(['uid'])
    },
    methods: {
        onSubmit(values) {
            console.log("submit", values);
        },
        login() {
            // 修改密码
            this.$http.post('/user/updatePwd', {
                oldPassword: this.phone,
                newPassword: this.mima,
                uid: this.uid
            }).then((res) => {
                console.log(res)
                Dialog({ message: res.data.msg });
                console.log(res.data.msg)
            })
        }
    }
}
</script>

<style scoped>
*{
    text-align: center;
}
.box {
    width: 100%;
    height: 55px;
    background-color: #3399ff;

}

.box h3 {
    color: white;
    line-height: 55px;
    margin-top: 0;
    margin-right: 20px;
}

.box span {
    color: white;
    float: left;
    line-height: 55px;
    margin-left: 20px;
}
</style>